<template>
  <view 
    class="exchange-goods-page"
    :style="{backgroundImage:'url('+staticImgs.pageBg+')'}"
  >
    <view 
      class="main-modal-wrapper"
      :style="{backgroundImage:'url('+staticImgs.modalBg+')'}"
    >
      <view class="text-info">
          请输入您获得的商品兑换码
      </view>
      <view class="input-wrapper">
        <input type="text" v-model="codeValue" placeholder=" " class="input"></input>
      </view>
      <view class="btn" @click="confirmHandle">
        确定
      </view>
    </view>
  </view>
</template>

<script>
  import { exchangeGoods } from '@/common/api/index_api.js'
  import { debounce } from 'lodash'
  export default{
   data(){
     return{
       staticImgs:{
         pageBg: this.imgBaseURL + '/codes-manage/code-redemption-page-bg.png',
         modalBg: this.imgBaseURL + '/codes-manage/modal-bg.png',
       },
       codeValue:'',
       loading:false,
       isToBack:false,
     }
   }, 
   onLoad(opt) {
     if(opt.backPage){
       this.isToBack = true
     }
     uni.removeStorageSync('checkupSclId')
     uni.removeStorageSync('hasDoneCheckupScl')
     console.log(opt,'-----isToBack')
   },
   watch:{
     codeValue(val){
       //去除空格
       if(val){
         this.codeValue = val.replace(/\s*/g,"")
       }
     },
   },
   methods:{
     confirmHandle(){
       this.useSubscription(this.preConfirmHandle)
     },
     preConfirmHandle :debounce(async function (){
       this.codeValue = this.codeValue.trim()
       if(this.codeValue.length>30){
         return this.$showToast('请检查是否正确,长度已超过30字符')
       }else if(this.codeValue == '' || this.codeValue.length === 0){
         return this.$showToast('请输入兑换码')
       }
       
       const result = this.codeValue.match(/[a-zA-Z0-9]/g) || '';
       
      if(!result){
        return this.$showToast('请检查是否正确')
      }

       if(this.loading){
         return 
       }
       this.loading = true
       uni.showLoading()
       
       console.log('--------start--------')
       
       exchangeGoods({
         conversionNumber:result.join('')
       }).then(({ data: dRes })=>{
         console.log(dRes,'==============={ data: dRes }')
         
         if(dRes.code == 200){
           if(dRes.data === true){            
             if(this.isToBack){
               uni.navigateBack()
             }else[
               uni.redirectTo({
                 url:'/pages/consultAccount/consultAccount'
               })  
             ]
           }else if(typeof(dRes.data)=="string"){
             uni.redirectTo({
               url: '/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON.stringify({
               	sclId: dRes.data
               })
             })
           }
           
           
         }else{
           this.$showToast(dRes.message)
         }
         
       }).catch(err=>{
         this.$showToast('兑换失败')
         uni.hideLoading()
        }).finally(()=>{
          this.loading = false
        })
       
       
       console.log('--------exchangeGoods--------')
       
       
     },300)
   }
  }
</script>

<style lang="scss" scoped>
  .exchange-goods-page{
    height: 100vh;
    width: 100vw;
    
    background-size: cover;
    background-position: center; 
    position: relative;
    padding-top: 50rpx;
    box-sizing: border-box;
    
    .main-modal-wrapper{
      width: 704rpx;
      height: 1092rpx;
      background-size: 100% 100%;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      
      .text-info{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 400;
        font-size: 34rpx;
        color: #333333;
        line-height: 48rpx;
        text-align: center;
        font-style: normal;
        
        
      }
      
      .input-wrapper{
        width: 500rpx;
        height: 90rpx;
        background: #F8F3F7;
        border-radius: 48rpx;
        border: 1rpx solid #CCCCCC;
        
        margin:40rpx 0 60rpx 0;
        
        .input{
          height: 100%;
          width: 100%;
          text-align: center;
          padding: 0 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 34rpx;
          box-sizing: border-box;
        }
      }
      
      
      .btn{
        width: 500rpx;
        height: 90rpx;
        line-height: 90rpx;
        border-radius: 52rpx;
        background-color: #FF839E;
        margin-bottom: 188rpx;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 34rpx;
        color: #FFFFFF;
        // line-height: 48rpx;
        text-align: center;
        font-style: normal;
      }
    }
    
  }
</style>